<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            pointer-events: none;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: #000;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="a"></div>
    </div>


    <script>


        // 1 鼠标跟随，首先是利用mousemove事件

        // 2 事件给谁绑定？？？？
        //    不能给里面的a  会跑丢
        //    放大镜效果可以绑定给box

        //    注意：如果没有隐藏a  最好把事件绑定在document上面  --- 防止跑丢


        // 3 offsetX  距离目标源的坐标  （target）    抽搐的效果    a条件pointer-event:none



        var oA = document.querySelector('.a');

        var oBox = document.querySelector('.box');

        var r = oA.offsetWidth / 2;
        


        // 鼠标跟随   mousemove

        oBox.onmousemove = function (e) {
            e = e || event;
            var x = e.offsetX - r;
            var y = e.offsetY - r;
            oA.style.left = x + 'px';
            oA.style.top = y + 'px';
        }



    </script>

</body>

</html>